<template>
	<!-- 新增/修改生产计划 -->
	<div>
		<el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="disabled" class="add-form2">
			<el-form-item label="返修任务单" prop="repairNumber">
				<el-input v-model="form.repairNumber" disabled />
			</el-form-item>
			<el-form-item label="产品名称" prop="productName">
				<el-input v-model="form.productName" disabled />
			</el-form-item>
			<el-form-item label="产品型号" prop="productModel">
				<el-input v-model="form.productModel" disabled />
			</el-form-item>
			<el-form-item label="产品编号" prop="productNumber" v-if="isOne">
				<el-input v-model="form.productNumber" disabled />
			</el-form-item>
			<!-- 生产计划 -->
			<div class="add-plan-title"><span class="title-text">生产计划</span></div>
			<div class="add-plan-box">
				<el-form-item label="计划开始时间" prop="programBeginTime">
					<el-date-picker v-model="form.programBeginTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 180px" placeholder="选择日期" @change="calEndTimeAll()" :clearable="false" />
				</el-form-item>
				<el-form-item label="完成天数" prop="completionDays">
					<el-input-number v-model="form.completionDays" style="width: 130px" :min="1" :max="9999" :precision="0" @change="calEndTimeAll()" />
				</el-form-item>
				<el-form-item label="计划完成时间" prop="programFinishTime" label-width="120px">
					<el-date-picker v-model="form.programFinishTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 180px" disabled />
				</el-form-item>
			</div>
			<div style="width: 100%">
				<el-table :data="form.tproductTechnologyList">
					<!-- <el-table-column prop="technologyCode" label="工艺流程编号" width="180"> </el-table-column> -->
					<el-table-column prop="technologyName" label="工艺流程" width="180"> </el-table-column>
					<el-table-column prop="technologyBeginTime" label="计划开始时间" align="center">
						<template slot-scope="scope">
							<el-date-picker size="small" v-model="scope.row.technologyBeginTime" type="date" placeholder="选择日期" @change="calStepTime(scope.row, scope.$index)" :clearable="false" />
						</template>
					</el-table-column>
					<el-table-column prop="completionDays" label="完成天数" align="center">
						<template slot-scope="scope">
							<el-input-number v-model="scope.row.completionDays" style="width: 130px" :min="1" :max="9999" :precision="0" @change="calStepTime(scope.row, scope.$index)" />
						</template>
					</el-table-column>
					<el-table-column prop="technologyFinishTime" label="计划完成时间" align="center">
						<template slot-scope="scope">
							<el-date-picker size="small" v-model="scope.row.technologyFinishTime" type="date" disabled />
						</template>
					</el-table-column>
					<el-table-column prop="actuallyCompleteTime" label="实际完成时间" align="center">
						<template slot-scope="scope">
							<el-date-picker size="small" v-model="scope.row.actuallyCompleteTime" type="date" disabled />
						</template>
					</el-table-column>
					<el-table-column prop="exceedStatus" label="状态" width="180" align="center">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.exceedStatus == 0">未超期</el-tag>
							<el-tag type="danger" v-if="scope.row.exceedStatus == 1">已超期</el-tag>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-form>
	</div>
</template>
<script>
import { parseTime } from "@/utils/ruoyi"
export default {
	name: "ProductPlan",
	props: {
		form: {
			type: Object,
			required: true,
			default: {}
		},
		isOne: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			// 表单校验
			rules: {
				approvalStatus: [{ required: true, message: "审批状态不能为空", trigger: "blur" }],
				causeRejection: [{ required: true, message: "驳回原因不能为空", trigger: "blur" }]
			},
			rules2: {
				approvalStatus: [{ required: true, message: "审批状态不能为空", trigger: "blur" }]
			}
		}
	},
	watch: {
		openApprove: {
			handler(newVal, oldVal) {
				if (newVal) {
					this.resetForm()
				}
			},
			immediate: true
		}
	},
	methods: {
		// 计算总的计划完成时间
		calEndTimeAll() {
			let time
			if (this.form.programBeginTime) {
				time = new Date(this.form.programBeginTime)
			} else {
				// 默认开始时间是今天
				time = new Date()
				this.form.programBeginTime = parseTime(time, "{y}-{m}-{d}")
			}
			time.setDate(time.getDate() + Number(this.form.completionDays))
			this.form.programFinishTime = parseTime(time, "{y}-{m}-{d}")
			// 更改分步第一条时间
			if (this.form.tproductTechnologyList.length > 0) {
				this.form.tproductTechnologyList[0].technologyBeginTime = this.form.programBeginTime
				this.calStepTime(this.form.tproductTechnologyList[0], 0)
			}
		},
		// 计算分步的时间
		calStepTime(row, index) {
			let time = new Date(row.technologyBeginTime)
			time.setDate(time.getDate() + Number(row.completionDays))
			row.technologyFinishTime = parseTime(time, "{y}-{m}-{d}")
			// 更改下一条的时间
			if (this.form.tproductTechnologyList[index + 1]) {
				// 下一条开始时间是上一条姐说时间+1天
				let time1 = new Date(row.technologyFinishTime)
				time1.setDate(time1.getDate() + 1)
				this.form.tproductTechnologyList[index + 1].technologyBeginTime = parseTime(time1, "{y}-{m}-{d}")
				// 计算下一条的时间
				this.calStepTime(this.form.tproductTechnologyList[index + 1], index + 1)
			}
		}
	}
}
</script>
<style scoped lang="scss">
.add-plan-title {
	width: 100%;
	height: 3rem;
	padding-left: 1rem;
}
.title-text {
	padding-bottom: 0.8rem;
	border-bottom: 2px solid rgb(42, 130, 228);
}
.add-plan-box {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
</style>
